<template>
  <base-page v-bind="baseInfo">
    <template #searchBar>
      <filter-form
        ref="filterForm"
        :elements="elements"
        :show-reset="true"
        @submit="submit"
      />
    </template>
    <template #mainAside>
      <CostList :loading="tableLoading" :list="list" />
    </template>
    <template #content>
      <div class="controller">
        <div class="left">
          <Button icon="add" @click="add">新增</Button>
        </div>
      </div>
      <div class="table-box">
        <TableNew
          :loading="tableLoading"
          :data="tableData"
          :columns="tableEl"
          :pagination="pagination"
          @paginationChange="paginationChange"
        >
          <template #status="scope">
            <div v-if="scope.row.status === 0">编制中</div>
            <div v-else-if="scope.row.status === 1">已编制</div>
            <div v-else-if="scope.row.status === 2">已发布</div>
          </template>
          <template #action="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top" :open-delay="600">
              <i class="el-icon-tickets action" @click="checkDetail(scope.row)" />
            </el-tooltip>
            <template v-if="scope.row.status === 0">
              <el-tooltip class="item" effect="dark" content="发布" placement="top" :open-delay="600">
                <i class="el-icon-s-promotion action no-perm" />
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.status === 1">
              <el-tooltip class="item" effect="dark" content="发布" placement="top" :open-delay="600">
                <i class="el-icon-s-promotion action" @click="commit(scope.row)" />
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.status === 2">
              <el-tooltip class="item" effect="dark" content="取消发布" placement="top" :open-delay="600">
                <i class="el-icon-circle-close action" @click="revoke(scope.row)" />
              </el-tooltip>
            </template>
          </template>
        </TableNew>
      </div>
      <Drawer
        ref="drawer"
        :visible="visible"
        title="添加预算编制数据"
        width="400px"
        :footer-btns="footerBtns"
        @cancel="cancel"
        @confirm="confirm"
      >
        <div class="drw-body">
          <el-form ref="form" :model="form" :rules="rules" size="mini" label-position="top">
            <el-form-item label="年度" prop="year">
              <el-date-picker
                v-model="form.year"
                type="year"
                placeholder="请选择年度"
                format="yyyy"
                value-format="yyyy"
                style="width:100% !important"
              />
            </el-form-item>
          </el-form>
        </div>
      </Drawer>
    </template>
  </base-page>
</template>
<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import {
  getOrganizationList,
  insertOrganization,
  releaseOrganization,
  cancelRelease
} from '@/api/collectionManage/budgetingData'

export default {
  name: 'BudgetingData',
  components: {},
  mixins: [baseFilterTable],
  props: {},
  data() {
    return {
      baseInfo: {
        searchBarShow: true
      },
      elements: [
        {
          label: '年度',
          type: 'datePicker',
          mode: 'year',
          format: 'yyyy',
          key: 'year',
          value: '',
          expiredDate: {
            disabledDate() {
              return false
            }
          }
        },
        {
          label: '状态',
          type: 'select',
          key: 'status',
          value: '',
          options: [
            {
              value: '0',
              label: '编制中'
            },
            {
              value: '1',
              label: '已编制'
            },
            {
              value: '2',
              label: '已发布'
            }
          ]
        }
      ],
      tableData: [],
      tableEl: [
        {
          title: '年度',
          dataIndex: 'year'
        },
        {
          title: '状态',
          dataIndex: 'status',
          type: 'otherTag'
        },
        {
          title: '操作时间',
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      visible: false,
      footerBtns: [
        {
          text: '保存',
          trigger: 'confirm'
        },
        {
          text: '取消',
          trigger: 'cancel',
          type: 'info'
        }
      ],
      form: {
        year: ''
      },
      rules: {
        year: [
          { required: true, message: '请选择年度', trigger: 'change' }
        ]
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    async getData(val) {
      this.tableLoading = true
      const params = {
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        year: val?.year || '',
        status: val?.status || ''
      }
      try {
        const { data } = await getOrganizationList(params)
        if (data.code === 200) {
          this.tableData = data.data.list
          this.pagination.total = data.data.total
        } else {
          console.log(data)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.tableLoading = false
      }
    },
    add() {
      this.visible = true
    },
    commit(row) {
      this.$confirm({
        title: '确认提示',
        content: '发布后，将本年度预算编制数据下发至各科室，是否继续发布？',
        okFn: async() => {
          const params = { year: row.year }
          try {
            const { data } = await releaseOrganization(params)
            if (data.code === 200) {
              this.$message.success(data.message || '操作成功')
              this.$refs.filterForm.submitFormFilter()
            } else {
              this.$message.error(data.message || '操作失败')
            }
          } catch (error) {
            console.log(error)
          }
        },
        cancelFn() {}
      })
    },
    checkDetail(row) {
      this.$router.push({
        path: '/budgeting-detail',
        query: {
          year: row.year
        }
      })
      // this.$bus.$emit('handleFrame', url.href, true)
    },
    revoke(row) {
      console.log(row)
      this.$confirm({
        title: '确认提示',
        content: '是否取消发布？',
        okFn: async() => {
          const params = { id: row.id }
          try {
            const { data } = await cancelRelease(params)
            if (data.code === 200) {
              this.$message.success(data.message || '操作成功')
              this.$refs.filterForm.submitFormFilter()
            } else {
              this.$message.error(data.message || '操作失败')
            }
          } catch (error) {
            console.log(error)
          }
        },
        cancelFn() {}
      })
    },
    cancel() {
      this.$refs.form.resetFields()
      this.visible = false
    },
    confirm() {
      const that = this
      this.$refs.form.validate(async v => {
        if (v) {
          this.$confirm({
            title: '确认提示',
            content: `您是否确认添加【${this.form.year}】年 预算编制数据，该操作不可撤销！`,
            async okFn() {
              that.$refs.drawer.loadOn('confirm')
              const params = {
                year: that.form.year
              }
              try {
                const { data } = await insertOrganization(params)
                if (data.code === 200) {
                  that.$message.success(data.message || '操作成功')
                  that.cancel()
                  that.$refs.filterForm.submitFormFilter()
                } else {
                  that.$message.error(data.message || '操作失败')
                }
              } catch (error) {
                console.log(error)
              } finally {
                that.$refs.drawer.loadOff('confirm')
              }
            },
            cancelFn() {}
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-box{
  height: calc(100% - 36px);
  display: flex;
  flex-direction: column;
}
.controller{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.drw-body{
  padding: 8px;
}
</style>
